<template>
	<view class="container">
		<view class="banner">


		</view>
		<image src="https://pic.fhshidai.com/filezhaochangfang.png" class="tijiao">
		<view class="form">
			<view class="form-title">
				<view class="title-left">填写资料</view>
				<view class="iconfont icon-tianxieziliao title-right"></view>
			</view>

			<view class="form-content">
				<view class="form-zhiwei">
					<view class="zhiwei-title">厂房选址</view>
					<view class="zhiwei">
						<view :class="['zhiwei-item',{'current':index===region_index}]" v-for="(item,index) in region" :key="index" @click="changeItem(index)">{{item.name}}</view>

					</view>
				</view>
				<view class="form-zhiwei">
					<view class="zhiwei-title">联系方式</view>
			<input class="input-item"   placeholder-style="font-size: 30rpx;color:#999B9F" v-model="name" placeholder="请输入联系人名称"/>
			<input class="input-item"  placeholder-style="font-size: 30rpx;color:#999B9F" v-model="mobile" placeholder="请输入联系电话"/>
			<input class="input-item"  placeholder-style="font-size: 30rpx;color:#999B9F" v-model="xuqiu" placeholder="请描述您的具体需求(如:层高6米)、配套电梯"/>

			</view>

			<view class="tijiao_button" @click="submitSave()">提交</view>
				</view>

		</view>


		<uni-footer></uni-footer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				region_index:0,
				region:[],
				name:'',
				'mobile':'',
				xuqiu:'',
				prevent:false,
			};
		},
		created() {
			this.$api.getRegions().then(res=>{
				this.region=res.data
			})
		},
		methods:{
			changeItem(index){
				this.region_index=index
			},
			submitSave(){

				if(this.prevent==true){
					return
				}
				this.prevent=true
				if(this.name==''){
					uni.showToast({
						icon:'fail',
						title:'请填写联系人名称'
					})
					this.prevent=false
					return;
				}
				if(this.mobile==''){
					uni.showToast({
						icon:'fail',
						title:'请输入联系电话'
					})
						this.prevent=false

					return;
				}
				if(this.xuqiu==''){
					uni.showToast({
						icon:'fail',
						title:'请描述您的具体需求'
					})
						this.prevent=false
					return;
				}

				this.$api.saveUserNeeds({
					region_id:this.region[this.region_index].value,
					name:this.name,
					telephone:this.mobile,
					description:this.xuqiu
				}).then(res=>{
					console.log(res)
					//#ifdef MP-TOUTIAO
						this.$toutiao(3)
					//#endif
					uni.showToast({
						title: '提交需求成功',
						duration:3000,
						success() {
							uni.switchTab({
								url:'/pages/index/index'
							})
						}

					});
					this.prevent=false
				}).catch(e=>{
					uni.showToast({
						icon:'fail',
						title:'服务器出错'
					})
					this.prevent=false
				})

			}
		}
	}
</script>
<style>
	page{
		color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.red-line{
		color: #D93337;
		height: 4rpx;
		width: 157rpx;
	}
	.tijiao{
		width:686rpx;
		height:111rpx;
		margin-top: -74rpx;
		background:rgba(255,255,255,1);
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 32rpx;
		margin-right: 32rpx;

	}
	.tijiao_button{
		margin-top: 47rpx;
		width:608rpx;
		height:90rpx;
		color: #FFFFFF;
		font-size: 29rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background:rgba(223,57,61,1);
		border-radius:45rpx;

	}
	.kefu{
		margin-top: 28rpx;
		width: 100%;
		text-align: center;
		color:#DF393D ;
		font-size: 24rpx;
		text{
			font-weight:400;
			color:rgba(153,155,159,1);
		}
	}
	.container{
		background-color:#F3F3F3 ;
		.banner{
			margin-top: -10rpx;
			background: url(https://pic.fhshidai.com/file7HtzJ40yuMQhd8AndJrPDaKKlIzN6YlKL7zhF86Y.png) no-repeat;
			width: 100%;
			background-size:750rpx  360rpx ;
			height: 400rpx;
			text-align: center;

		}
		.form{
			margin-left: 30rpx;

			width: 690rpx;
			height: 1033rpx;
			border-radius:9rpx;
			margin-top: 32rpx;
			background:rgba(255,255,255,1);
			.form-title{
				height: 115rpx;
				padding-left: 42rpx;
				padding-right: 42rpx;
				display: flex;
				padding-top: 30rpx;
				border-bottom: 4rpx solid #F3F3F3;
				justify-content: space-between;
				align-items: flex-end;
				padding-bottom: 21rpx;
				.title-left{
					color: #313131;
					font-size: 40rpx;
					font-weight: bold;

				}
				.title-right{
					font-size: 54rpx;
					color:#313131 ;
				}

			}
			.form-content{
				padding-left: 42rpx;
				padding-right: 42rpx;
				.input-item{
					height: 94rpx;
					border-bottom: 2rpx solid #F3F3F3;
					color: #303133;
				}
				.form-zhiwei{

					margin-top: 60rpx;
					border-bottom:2rpx solid #F3F3F3 ;
					.zhiwei-title{
						font-size:30rpx;

						font-weight:bold;
						color:rgba(59,59,59,1);
						line-height:40px;
					}
					.zhiwei{
						display: flex;
						justify-content: flex-start;

						flex-wrap: wrap;
						.zhiwei-item{
							width:188rpx;
							height:75rpx;
							margin-right:15rpx ;
							background:rgba(247,247,245,1);
							border:1rpx solid rgba(219,219,219,1);
							border-radius:4rpx;
							font-size:28rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							margin-bottom: 19rpx;
							font-weight:500;
							color:rgba(73,73,73,1);
						}
						.current{
							background:rgba(223,57,61,1);
							color:rgba(255,255,255,1);
						}
					}
				}
			}
		}
		.service{
			background-color: #FFFFFF;
				display: flex;
				margin-top: 47rpx;
				flex-direction: column;
				align-items: center;
				padding-bottom: 95rpx;
			.service-title{
				display: flex;
				width: 686rpx;
				height: 134rpx;
				justify-content: flex-end;
				align-items: center;
				font-size:40rpx;
				line-height: 70rpx;
				flex-direction: column;
				border-bottom: 2rpx solid #F3F3F3;
				font-weight:bold;
				color:rgba(49,49,49,1);
				.red-line{
					width:157rpx;
					height:4rpx;
					background:rgba(217,51,55,1);
				}
			}
			.service-content{

					width: 686rpx;
					height: auto;
					image{
						width: 686rpx;
					}
			}
		}
	}
</style>
